<!--
开发者：ms.hui
开发时间：2021.03.10
功能：折线图四类lenged公用组件
-->
<template>
  <div class="echarts" :id="chartId"></div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      columnarEcharts: {},
    };
  },
  methods: {},
  computed: {
    option() {
      return {
        title: {
          text: this.title,
          x: "left",
          y: 10,
          textStyle: {
            color: this.titleColor,
            fontSize: 16,
            fontWeight: "600",
          },
        },
        color: [this.barColor, this.barColor1, this.barColor2, this.barColor3],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          icon: "circle",
          itemGap: 0, // 设置间距
          itemHeight: 10, //点大小
          x: "center", //可设定图例在左、右、居中
          y: "bottom", //可设定图例在上、下、居中
          data: [
            this.seriesName,
            this.seriesName1,
            this.seriesName2,
            this.seriesName3,
          ],
          textStyle: {
            //图例文字的样式
            color: "#fff",
            fontSize: 10,
          },
        },
        grid: {
          top: "15",
          left: "3%",
          right: "3%",
          bottom: "30",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.xData,
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: "0",
              // rotate: 50,
              textStyle: {
                color: "#fff", //坐标值得具体的颜色,
                fontSize: 8,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#39456A",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            nameTextStyle: {
              padding: [0, 35, 0, 0], // 四个数字分别为上右下左与原位置距离
            },
            axisLabel: {
              interval: "0",
              // rotate: 50,
              textStyle: {
                color: "#fff", //坐标值得具体的颜色,
                fontSize: 10,
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(0, 255, 226, 0.54)",
              },
            },
            // 网格样式
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: this.seriesName,
            type: this.seriesType,
            data: this.seriesData,
            smooth: true,
            symbolSize: 5,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(49, 251, 251, 0.4)",
                    },
                    {
                      offset: 1,
                      color: "rgba(49, 251, 251, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(49, 251, 251, 0)",
                shadowBlur: 10,
              },
            },
          },
          {
            name: this.seriesName1,
            type: this.seriesType1,
            smooth: true,
            symbolSize: 5,
            data: this.seriesData1,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(49, 251, 251, 0.4)",
                    },
                    {
                      offset: 1,
                      color: "rgba(49, 251, 251, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(49, 251, 251, 0)",
                shadowBlur: 10,
              },
            },
          },
          {
            name: this.seriesName2,
            type: this.seriesType2,
            smooth: true,
            symbolSize: 5,
            data: this.seriesData2,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(81, 88, 250, 0.4)",
                    },
                    {
                      offset: 1,
                      color: "rgba(81, 88, 250, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(81, 88, 250, 0)",
                shadowBlur: 10,
              },
            },
          },
          {
            name: this.seriesName3,
            type: this.seriesType3,
            smooth: true,
            symbolSize: 5,
            data: this.seriesData3,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(81, 88, 250, 0.4)",
                    },
                    {
                      offset: 1,
                      color: "rgba(81, 88, 250, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(81, 88, 250, 0)",
                shadowBlur: 10,
              },
            },
          },
        ],
      };
    },
  },
  props: {
    //图表id
    chartId: {
      type: String,
    },
    //图表标题
    title: {
      type: String,
    },
    //柱状颜色或折线颜色
    barColor: {
      type: String,
      default: "#31FBFB",
    },
    barColor1: {
      type: String,
      default: "#185CFE",
    },
    barColor2: {
      type: String,
      default: "#5158FA",
    },
    barColor3: {
      type: String,
      default: "#FF069B",
    },
    //x轴数据["周一","周二","周三","周四","周五","周六","周日"]
    xData: {
      type: Array,
      default() {
        return [];
      },
    },
    //图表类型，柱状图为bar折线图为line
    seriesType: {
      type: String,
      default: "bar",
    },
    seriesType1: {
      type: String,
      default: "bar",
    },
    seriesType2: {
      type: String,
      default: "bar",
    },
    seriesType3: {
      type: String,
      default: "bar",
    },
    //图表tip提示名称，数据描述，如数量
    seriesName: {
      type: String,
      default: "",
    },
    seriesName1: {
      type: String,
      default: "",
    },
    seriesName2: {
      type: String,
      default: "",
    },
    seriesName3: {
      type: String,
      default: "",
    },
    //图表数据，数组，单个示例：[220, 182, 191, 234, 290, 330, 310]
    seriesData: {
      type: Array,
      default() {
        return [];
      },
    },
    seriesData1: {
      type: Array,
      default() {
        return [];
      },
    },
    seriesData2: {
      type: Array,
      default() {
        return [];
      },
    },
    seriesData3: {
      type: Array,
      default() {
        return [];
      },
    },
    titleColor: {
      type: String,
      default: "#282828",
    },
  },
  watch: {
    //检测数据变化更新图表
    seriesData(val) {
      this.columnarEcharts.setOption(this.option);
    },
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      this.columnarEcharts = echarts.init(
        document.getElementById(that.chartId)
      );
      this.columnarEcharts.setOption(this.option);
      window.addEventListener("resize", function () {
        if (
          that.columnarEcharts._dom.clientHeight != 0 &&
          that.columnarEcharts._dom.clientWidth != 0
        ) {
          that.columnarEcharts.resize();
        }
      });
    });
  },
};
</script>
<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
